import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' 

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control
//使用tippy.js提示框组件
import tippy from 'tippy.js';

// 导入 Tippy.js 的 CSS 样式
import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/light.css';


//production生产(上线)环境不需要模拟数据mock development开发环境

// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// 使用英文版ElementUI
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

Vue.config.productionTip = false

// 注册一个全局指令
Vue.directive('tippy', {
  bind(el, binding) {
    tippy(el, {
      content: binding.value,
      trigger: 'click ',
      ...binding.modifiers,
      ...binding.arg
    });
  },
  update(el, binding) {
    // 更新提示内容
    el._tippy.setContent(binding.value);
  },
  unbind(el) {
    el._tippy.destroy();
  }
});
// 封装自定义指令 用来实现按钮级别的权限控制
Vue.directive('permission', {
  // 会在指令作用的元素插入到页面完成以后触发
  inserted(el, binding) {
    // el 指令作用的元素的dom对象
    // console.log(el)
    const points = store.state.user.userInfo?.roles?.points || [] // 当前用户信息的操作权
    if (!points.includes(binding.value)) {
      // 不存在就要删除或者禁用
      el.remove() // 删除元素
      // el.disabled = true
      // 线上的权限数据和线下的代码进行对应
    }
  }

})
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
